<template>
	<view>
		<!-- <view class="label-list" v-for="(item,index) in tagList" :key="index">
			{{ item.name }}
		</view>
		 -->
		<!-- 列表 -->
		    <view class="lis-flex">
		      <block v-for="(item,index) in tagList" :key="index">
		        <view class="lis-item" v-if="fontColor != ''"  @tap="tapTagHead(item.id)">
		          <view class="lis-title" :style="{ color: fontColor[index % fontColor.length] }">
		            {{ item.name }}
		          </view>
		        </view>
		      </block>
		    </view>
		
		<!-- loading加载图 -->
		<block v-if="page > 1">
			<loading-lis :listsLoading="listsLoading"></loading-lis>
		</block>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	export default {
		data() {
			return {
				wxSet: [], //基本配置
				tagList: [], //标签
				page: 1,
				// loading
				listsLoading: true,
				
				fontColor: ["rgb(138, 84, 208)", "rgb(232, 58, 91)",  "rgb(250, 131, 71)", "rgb(65, 64, 125)",
				          "rgb(53, 199, 84)", "rgb(73, 120, 240)","rgb(232, 58, 91)","rgb(65, 64, 125)",
				        ],
			}
		},
		onLoad() {
			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;

				// 标签数据
				this.tags();
			}

			// 微信分享盆友圈
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif

		},
		// 分享好友配置
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.wxSet.share_title,
				imageUrl: this.wxSet.share_title_url,
				path: 'pages/tags/tags'
			}
		},
		// 监听触底----上啦刷新
		onReachBottom() {
			this.page = this.page + 1;
			this.tags();
		},
		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;

				// 标签数据
				this.tags();

			},

			// 标签数据
			tags() {
				// 生成随机数
				API.getTags([100], [this.page], [0]).then((res) => {
					if (!res.data.length) {
						this.listsLoading = false;
					} else {
						this.tagList = this.tagList.concat(res.data);
					}
					// console.log('标签数据',res.data)
				})
			},

			// 点击标签搜索
			tapTagHead(e) {
				uni.navigateTo({
					url: '../list/list?jstag=' + e
				})
			},
		}
	}
</script>

<style>
	.label-list {
		height: 40rpx;
		padding: 12rpx 36rpx;
		background-color: #596982;
		border-radius: 100rpx;
		margin: 10rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		flex-shrink: 0;
		display: inline-block;
	}

	.lis-flex {
		display: flex;
		/* justify-content: center; */
		padding: 20rpx;
		flex-wrap: wrap;
		background-color: #ffffff;
		border-radius: 20rpx 0;

	}

	.lis-item {
		width: 30%;
		margin: 10rpx;
		flex-shrink: 0;
		position: relative;
		background-color: rgb(246, 247, 251);
		padding: 20rpx 0;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.lis-title {
		text-align: center;
		font-size: 30rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>